<template>
  <div>
    <div class="pageTitleWhole">
      <a-breadcrumb>
        <a-breadcrumb-item>订单审核</a-breadcrumb-item>
      </a-breadcrumb>
    </div>
    <div class="pageContentWhole">
      <a-row>
        <a-col :span="24">
          <a-form layout="inline">
            <a-form-item label="客户名称">
              <a-input v-model="searchForm.custName" />
            </a-form-item>
            <a-form-item label="海船公司">
              <a-input v-model="searchForm.seagoingShipCompanyName" />
            </a-form-item>
            <a-form-item>
              <a-input-group compact>
                <a-select
                  v-model="searchForm.typeIndex"
                  @change="onChangeTypeOptions"
                  class="selectWidth"
                >
                  <a-select-option v-for="v in typeOptions" :key="v.key">{{v.title}}</a-select-option>
                </a-select>
                <a-input style="width: 200px" @change="onNameChange" />
              </a-input-group>
            </a-form-item>
            <a-form-item label="订单类型">
              <a-select v-model="searchForm.orderType" class="selectInputWidth">
                <a-select-option key>全部</a-select-option>
                <a-select-option v-for="v in OrderOptions" :key="v.key">{{v.title}}</a-select-option>
              </a-select>
            </a-form-item>
            <a-form-item label="结算类型">
              <a-select v-model="searchForm.settlementType" class="selectInputWidth">
                <a-select-option key>全部</a-select-option>
                <a-select-option v-for="v in settlementTypeList" :key="v.key">{{v.value}}</a-select-option>
              </a-select>
            </a-form-item>
            <a-form-item label="所属销售">
              <a-input v-model="searchForm.sellerName" />
            </a-form-item>
            <a-form-item label="起运港">
              <a-input v-model="searchForm.startPortName" />
            </a-form-item>
            <a-form-item label="目的港">
              <a-input v-model="searchForm.endPortName" />
            </a-form-item>
            <a-form-item>
              <a-input-group compact>
                <a-select
                  v-model="searchForm.dateIndex"
                  @change="onDateTypeChange"
                  class="selectWidth"
                >
                  <a-select-option v-for="(v, k) in dateOptions" :key="k">{{v}}</a-select-option>
                </a-select>
                <a-range-picker @change="onDateChange">
                  <a-icon slot="suffixIcon" type="calendar" />
                </a-range-picker>
              </a-input-group>
            </a-form-item>

            <a-form-item>
              <a-button type="primary" @click="handleSubmit1">查询</a-button>
            </a-form-item>
          </a-form>
        </a-col>
      </a-row>
    </div>

    <!-- 订单审核列表 -->
    <a-row class="orderItem ordertem_de">
      <a-col :span="24">
        <a-spin :spinning="spinning">
          <template v-if="tableData.length > 0">
            <div v-for="(item, index) in tableData" :key="index" class="orderList">
              <a-card size="small">
                <template slot="title">
                  <a-descriptions :column="4" class="titleCard" style="padding-left:24px;">
                    <a-descriptions-item label="公司编号">{{item.orderCode||'--'}}</a-descriptions-item>
                    <a-descriptions-item label="运单号">{{item.seagoingShipOrderCode||'--'}}</a-descriptions-item>
                    <a-descriptions-item
                      label="驳船船名航次"
                    >{{item.shipName||'--'}}/{{item.shipVoyage||'--'}}</a-descriptions-item>
                    <a-descriptions-item
                      label="结算类型"
                    >{{checkSettlementTypeName(item.settlementType)}}</a-descriptions-item>
                  </a-descriptions>
                </template>
                <a-tag
                  v-if="item.isUrgent===1"
                  slot="extra"
                  color="red"
                  class="jia"
                  style="margin-right:24px;"
                >加急</a-tag>
                <div class="order_detail">
                  <a-descriptions :column="4" size="small">
                    <a-descriptions-item label="客户名称">{{item.custName}}</a-descriptions-item>
                    <a-descriptions-item label="货品名称">{{item.goodsName}}</a-descriptions-item>
                    <a-descriptions-item
                      :label="addressInfo(item.addressList, 1).opeType"
                      :span="2"
                    >{{addressInfo(item.addressList, 1).addressAll}}</a-descriptions-item>

                    <a-descriptions-item label="海船公司">{{item.seagoingShipCompanyName||'--'}}</a-descriptions-item>
                    <a-descriptions-item label="箱型箱量">{{item.containerType}}*{{item.containerNum}}</a-descriptions-item>
                    <a-descriptions-item
                      :span="2"
                      :label="addressInfo(item.addressList, 1).opeType ? '联系人' : ''"
                    >
                      <p
                        style="margin:0"
                      >{{addressInfo(item.addressList, 1).linkMan}} {{addressInfo(item.addressList, 1).linkManPhone}}</p>
                    </a-descriptions-item>

                    <a-descriptions-item label="订单类型">{{orderTypeStr(item.orderType)}}</a-descriptions-item>
                    <a-descriptions-item
                      label="起运/目的港"
                    >{{item.startPortName||'--'}} / {{item.endPortName||'--'}}</a-descriptions-item>
                    <a-descriptions-item
                      :label="addressInfo(item.addressList, 2).opeType"
                      :span="2"
                    >{{addressInfo(item.addressList, 2).addressAll}}</a-descriptions-item>

                    <a-descriptions-item label="所属销售">{{item.sellerName}}</a-descriptions-item>
                    <a-descriptions-item label="要求送达">{{item.requiredArriveTime}}</a-descriptions-item>
                    <a-descriptions-item
                      :label="addressInfo(item.addressList, 2).opeType ? '联系人' : ''"
                    >
                      <p
                        style="margin:0"
                      >{{addressInfo(item.addressList, 2).linkMan}} {{addressInfo(item.addressList, 2).linkManPhone}}</p>
                    </a-descriptions-item>
                    <a-descriptions-item v-if="item.addressList.length > 2">
                      <a @click="doOrderAudit(item.orderJiateId)">更多门点...</a>
                    </a-descriptions-item>
                  </a-descriptions>
                </div>
              </a-card>
              <a-card size="small" style="border-top:none" class="order_czuo">
                <template slot="title">
                  <a-descriptions :column="12" class="titleCard">
                    <a-descriptions-item :span="2">
                      <img src="../../../../static/images/order_zt1.png" /> 待审核
                    </a-descriptions-item>
                    <a-descriptions-item :span="2">
                      <img src="../../../../static/images/order_start.png" /> 销售下单
                      <span class="xdan_time">（{{item.createTime}}）</span>
                    </a-descriptions-item>
                  </a-descriptions>
                </template>
                <a-button
                  slot="extra"
                  type="primary"
                  ghost
                  @click="doOrderAudit(item.orderJiateId)"
                >审核</a-button>
              </a-card>
            </div>
          </template>
          <div
            v-if="tableData.length === 0"
            style="margin: 0 24px 24px; padding: 20px 0; background: white;"
          >
            <a-empty />
          </div>
        </a-spin>
        <p class="orderPagination">
          <a-pagination
            show-size-changer
            show-quick-jumper
            :current="pagination.current"
            :total="pagination.total"
            :showTotal="pagination.showTotal"
            :pageSize="pagination.pageSize"
            @showSizeChange="pagination.onShowSizeChange"
            @change="pagination.onChange"
          />
        </p>
      </a-col>
    </a-row>
  </div>
</template>

<script>
import { mixin } from '@/common/settlement2'
import { OrderOptions } from '../options'
import { queryJiateOrderAuditList } from '@/api/landCenter'

export default {
  mixins: [mixin],
  data () {
    const typeOptions = [
      { key: 'orderCode', title: '公司编号' },
      { key: 'seagoingShipOrderCode', title: '运单号' },
      { key: 'containerNo', title: '箱号' },
      { key: 'containerSealNo', title: '封号' }
    ]
    const dateOptions = ['下单日期', '要求送达日期']

    return {
      spinning: false,
      OrderOptions,
      typeOptions,
      dateOptions,
      searchForm: {
        custName: '', // 客户名称
        seagoingShipCompanyName: '', // 海船公司
        orderCode: '', // 公司编号
        seagoingShipOrderCode: '', // 运单号
        containerNo: '', // 箱号
        containerSealNo: '', // 封号
        settlementType: '',
        orderType: '',
        sellerName: '', // 所属销售
        startPortName: '', // 起运港
        endPortName: '', // 目的港
        createTime1: null, // 下单日期
        createTime2: null, // 下单日期
        arriveTime1: null, // 要求送达时间
        arriveTime2: null, // 要求送达时间
        // 下拉词条，输入框暂存
        typeIndex: 'orderCode',
        dateIndex: 0,
        typexName: '',
        time1: null,
        time2: null
      },
      // 订单card start
      tableData: [],
      pageNum: 1,
      pageSize: 10,
      pagination: {}
      // 订单card end
    }
  },
  methods: {
    orderTypeStr (key) {
      const t = this.OrderOptions.filter(v => v.key === key)[0]
      if (t) return t.title
      return '--'
    },
    initSearchCondition1 () {
      Object.assign(this.searchForm, {
        orderCode: '', // 公司编号
        seagoingShipOrderCode: '', // 运单号
        containerNo: '', // 箱号
        containerSealNo: '' // 封号
      })
    },
    onChangeTypeOptions (value) {
      this.initSearchCondition1()
      this.searchForm[value] = this.searchForm.typexName
    },
    onNameChange (e) {
      this.searchForm.typexName = e.target.value
      this.onChangeTypeOptions(this.searchForm.typeIndex)
    },
    initSearchCondition2 () {
      Object.assign(this.searchForm, {
        createTime1: null,
        createTime2: null,
        arriveTime1: null,
        arriveTime2: null
      })
    },
    onDateTypeChange (value) {
      this.initSearchCondition2()
      if (value === 0) {
        this.searchForm.createTime1 = this.searchForm.time1
        this.searchForm.createTime2 = this.searchForm.time2
      } else {
        this.searchForm.arriveTime1 = this.searchForm.time1
        this.searchForm.arriveTime2 = this.searchForm.time2
      }
    },
    onDateChange (date, dataStr) {
      this.searchForm.time1 = dataStr[0]
      this.searchForm.time2 = dataStr[1]
      this.onDateTypeChange(this.searchForm.dateIndex)
    },
    getPagination (data) {
      const pages = data ? data.pages : 0
      return {
        current: this.pageNum,
        pageSize: this.pageSize,
        total: data ? data.total : 0,
        showTotal: total => `共${total}条记录 第${this.pageNum}/${pages}页`,
        onChange: pageNum => {
          this.pageNum = pageNum
          this.handleSubmit()
        },
        onShowSizeChange: (current, size) => {
          this.pageNum = current
          this.pageSize = size
          this.handleSubmit()
        }
      }
    },
    handleSubmit1 () {
      this.pageNum = 1
      this.handleSubmit()
    },
    handleSubmit () {
      this.spinning = true
      queryJiateOrderAuditList({
        ...this.searchForm,
        pageNum: this.pageNum,
        pageSize: this.pageSize
      }).then(rsp => {
        this.spinning = false
        this.tableData = rsp.data.list
        this.pagination = this.getPagination(rsp.data)
      }).catch(() => { this.spinning = false })
    },
    addressInfo (addressList, index) {
      let info = {}
      if (addressList.length > 0) {
        if (index === 1) {
          info = addressList[0]
        } else if (index === 2 && addressList.length > 1) {
          info = addressList[1]
        }
      }
      if (info.opeType === 1) {
        info.opeType = '装货'
      } else if (info.opeType === 2) {
        info.opeType = '卸货'
      } else if (info.opeType === 3) {
        info.opeType = '提箱'
      }

      if (info.addressType === 1) {
        info.addressAll = info.portName
      } else if (info.addressType === 2) {
        info.addressAll = `${info.province}${info.city}${info.area}${info.address}`
      }
      return info
    },
    doOrderAudit (orderJiateId) {
      if (!this.$root._bc.audit) {
        this.$message.error('您无此权限！')
        return
      }
      this.$router.push('doOrderAudit/' + orderJiateId)
    }
  },
  created () {
    this.pagination = this.getPagination()
  },
  mounted () {
    this.handleSubmit()
  }
}
</script>

<style lang="less" scoped>
// overflow:hidden; white-space: nowrap; text-overflow: ellipsis;
</style>
